<template>
  <el-dialog v-model="visible" title="创建新文件夹" width="400px" :close-on-click-modal="false">
    <div>
      <el-form>
        <el-form-item label="文件夹名称" label-width="90px">
          <el-input v-model="folderName" placeholder="请输入文件夹名称" />
        </el-form-item>
        <el-form-item label="选择颜色" label-width="90px">
          <el-color-picker v-model="color" />
          <span style="margin-left:12px;">{{ color }}</span>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" :disabled="!folderName" @click="onCreate">创建</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean
})
const emit = defineEmits(['update:modelValue', 'create'])

const visible = ref(props.modelValue)
const folderName = ref('')
const color = ref('#6366f1')

watch(() => props.modelValue, v => visible.value = v)
watch(visible, v => emit('update:modelValue', v))

function onCancel() {
  visible.value = false
}
function onCreate() {
  emit('create', { name: folderName.value, color: color.value })
  visible.value = false
  folderName.value = ''
  color.value = '#6366f1'
}
</script> 